1. 巢狀結構的例子

• HTML

• CSS
  .menu {
  background-color: #333; //選擇 menu class 的 div 元素，將背景顏色設為深灰色（#333）
  }

.menu ul {
list-style-type: none; //選擇 menu class 內的 ul 元素，將列表項的標記符號去掉（list-style-type: none）
}

.menu ul li {
display: inline-block; //選擇 menu class 內的 ul 列表中的每個 li，將其設定為行內塊級元素，讓列表項水平排列
}

.menu ul li a {
color: white;
text-decoration: none; //選擇每個 li 內的超連結 a，將文字顏色設為白色，並移除底線裝飾
}

• Sass/SCSS
  .menu {
  background-color: #333;

  ul {
  list-style-type: none;

  li {
  display: inline-block;

  a {
    color: white;
    text-decoration: none;
  }
  

  }
  }
  }

• 更直觀地看出 ul 是 .menu 的子元素，li 和 a 是 ul 的子元素

2. 巢狀屬性的例子

• CSS
  button {
  border-width: 1px;
  border-style: solid;
  border-color: #3498db;
  }

Sass/SCSS
button {
border: {
width: 1px;
style: solid;
color: #3498db;
}
}

• 屬性相關的部分更緊密地放在一起，程式碼更易於閱讀

3. 選擇器巢狀例子

.nav {
background-color: #333;

ul {
list-style-type: none;
padding: 0;

li {
  display: inline-block;
  margin-right: 10px;

  a {
    color: white;
    text-decoration: none;

    &:hover {
      color: #ffcc00;
    }
  }
}

}
}

• 編譯後的CSS
  .nav {
  background-color: #333;
  }

.nav ul {
list-style-type: none;
padding: 0;
}

.nav ul li {
display: inline-block;
margin-right: 10px;
}

.nav ul li a {
color: white;
text-decoration: none;
}

.nav ul li a:hover {
color: #ffcc00;
}